<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>修改热力图bounds</title>
  <script src="Cesium/Cesium.js"></script>
  <script type="text/javascript" src="plugin/viewerCesiumNavigationMixin.js"></script>
  <script type="text/javascript" src="plugin/CesiumHeatmap.js"></script>
  <link href="Cesium/Widgets/widgets.css" rel="stylesheet" />

  <style>
    html,
    body {
      display: block;
      margin: 0;
      height: 100%;
    }

    #cesiumContainer {
      height: 100%;
    }

  </style>
</head>

<body>
  <div id="cesium-logo"></div>
  <div id="cesiumContainer"></div>

  <script>
    var esri = new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
      enablePickFeatures: false,
    })
    var viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: esri,
      navigationHelpButton: false,
      timeline: false,
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      baseLayerPicker: false,
      // sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
      creditContainer: 'cesium-logo'
    })

    viewer.extend(Cesium.viewerCesiumNavigationMixin, {})

    // 矩形坐标
    var bounds = {
      west: -109.0,
      south: 30.0,
      east: -80.0,
      north: 40.0
    }

    var bounds2 = {
      west: -109.0,
      south: 40.0,
      east: -80.0,
      north: 50.0
    }

    // 初始化CesiumHeatmap
    var heatMap = CesiumHeatmap.create(
      viewer, // 视图层
      bounds, // 矩形坐标
      { // heatmap相应参数
        maxOpacity: .5,
        minOpacity: 0,
        blur: .75
      }
    )

    var sourceData = getData(300)
    console.log(sourceData, 'sourceData')

    // 添加数据 最小值，最大值，数据集
    heatMap.setWGS84Data(0, 100, sourceData)
    viewer.zoomTo(viewer.entities)

    var times = 0

    setInterval(function () {
      times++
      if (times % 2 === 0) {
        heatMap.changeBounds(bounds)
        heatMap.setWGS84Data(0, 100, sourceData)
      } else {
        heatMap.changeBounds(bounds2)
        heatMap.setWGS84Data(0, 100, sourceData)
      }
    }, 2000)

    // 动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
    function getData(length) {
      var data = []
      for (var i = 0; i < length; i++) {
        var x = Math.random() * (-109 + 80) - 80
        var y = Math.random() * (50 - 30) + 30
        var value = Math.random() * 100
        data.push({
          x: x,
          y: y,
          value: value,
          radius: 200
        })
      }
      return data
    }

  </script>
</body>

</html>
